<template>
    <div>
        <el-dialog title="人员分组"  width="90vw" top="5vh" append-to-body :close-on-click-modal="false" :visible.sync="visible" v-if="visible"  @close="callback">
            <el-row :gutter="20">
                <el-col  :xs="24" :sm="24" :md="7">
                    <div class="boxsty" style="height:60vh;overflow:auto">
                        <el-tree :data="treeData" :props="defaultProps" ref="deptTree" :filter-node-method="filterNode"  class="filter-tree" node-key="id" highlight-current :default-expanded-keys="[1]" accordion @node-click="getNodeData" />
                    </div>
                </el-col>
                <el-col :xs="24" :sm="24" :md="7" v-if="showPrise">
                    <div class="boxsty">
                    <div class="flex titbottom" >
                        <el-input v-model="listQuery.name" placeholder="请输入搜索用户" style="margin-right:10px"></el-input>

                        <el-button @click="btnSearch" type="primary" icon="el-icon-search" plain>搜索</el-button>

                    </div>
                    <div class="avue-crud">
                    <el-table @row-click="handleClick" :data="tableDataDept" v-loading="tableloading" style="width: 100%">
                        <!-- <el-table-column fixed prop="userId" label="Id" width="80">-->
                        <!--/el-table-column>-->
                        <el-table-column prop="ryCode" label="用户" width="120">
                        </el-table-column>
                        <el-table-column prop="ryXm" label="姓名" min-width="150">
                        </el-table-column>
                        <!--               <el-table-column fixed="right" label="操作" width="100">-->
                        <!--                <template slot-scope="scope">-->
                        <!--                  <el-button @click="handleClick(scope.row)" type="text" size="small">添加</el-button>-->
                        <!--                </template>-->
                        <!--               </el-table-column>-->
                    </el-table>
                    </div>
                    <div style="margin-top:20px">
                        <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="page.currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="page.pageSize" :total="page.total" background layout="total, sizes, prev, pager, next">
                        <!-- , jumper -->
                        </el-pagination>
                    </div>
                    </div>
                </el-col>
                <el-col :xs="24" :sm="24" :md="10">
                    <div class="boxsty" v-if="showPrisehidden">
                        <div v-if="activeName=='third'" style="margin-bottom:20px;">
                            已选人员
                        </div>
                        <div v-else style="margin-bottom:20px;">
                            <el-button type="primary" plain>重置分组</el-button>
                            <el-input style="float:right;width:160px;" v-model="ryfzMc" placeholder="设置分组名称"></el-input>
                        </div>
                        <el-table :data="tableDataUser" ref="ry-table" stripe>
                            <el-table-column prop="ryName" label="姓名" min-width="100">
                            </el-table-column>
                            <el-table-column fixed="right" label="操作" width="100">
                            <template slot-scope="scope">
                                <el-button @click="delUserList(scope.$index)" type="danger" plain>删除</el-button>
                            </template>
                            </el-table-column>
                        </el-table>
                        <div style="text-align:right;margin-top:20px;">
                            <el-button v-if="activeName=='third'" type="primary" plain>保存</el-button>
                            <el-button v-if="activeName!='third'&&canSubmit" type="primary" plain @click="btnSave">保存分组</el-button>
                        </div>
                    </div>
                    <div class="boxsty" v-if="showRentPrise">
                        <div class="tabletext titbottom">已选择机构</div>
                        <div class="avue-crud">
                            <el-table :data="tableDataUser" ref="ry-table" stripe>
                            <el-table-column prop="jgDeptName" label="机构名称" width="300"></el-table-column>
                            <el-table-column  label="操作" width="100">
                                <template slot-scope="scope">
                                <el-button @click="delUserList(scope.$index)" type="danger" plain>删除</el-button>
                                </template>
                            </el-table-column>
                            </el-table>
                            <div style="text-align:right;margin-top:20px;">
                                <el-button v-if="canSubmit" type="primary" plain @click="jgBtnSave">保存</el-button>
                            </div>
                        </div>
                    </div>
                </el-col>
            </el-row>
        </el-dialog>    
    </div>
</template>

<script>
import { fayuetree } from '@/api/hetongrenwu/hetongyeji/hetongnd'
import { fetchList } from '@/api/admin/user'
import { validatenull } from "@/util/validate";
import { shouyuetree } from '@/api/hetongrenwu/hetongyeji/hetongnd'
import {fetchTree} from '@/api/admin/dept'
import {addRyfzmxbList, getFzList, getOtherRyfzmx,jiangjinryfzb,jiGougetFzList} from '@/api/jiangjin/jiangjinryfzmxb'
import {ControlPage} from '@/api/jiangjin/jiangjinryxxb'
import {
  getDeptList,
} from '@/api/jiangjin/jiangjinjjjgfz'
import {
  insertJgmxbListNew,
} from '@/api/jiangjin/jiangjinjjjgwh'
export default {
    name:"groupEditing-form",
    data(){
        return{
            visible:false,
            listQuery: {
                name: ''
            },
            treeData: [],
            jgtreeData: [],
            defaultProps: {
                children: 'children',
                label: 'name'
            },
            page: {
                total: 0, // 总页数
                currentPage: 1, // 当前页数
                pageSize: 20, // 每页显示多少条,
                isAsc: false // 是否倒序
            },
            tableDataDept:[],
            tableloading:false,
            qjDeptId: '', //全局部门id
            qjGzId: "", //全局规则id
            tableDataUser:[],
            ryfzMc:"",
            activeName:"",
            valueList:[],
            type:"",
            showPrise:true,
            showPrisehidden:true,
            showRentPrise:false,
        }
    },
    methods:{
        init(data){
            this.visible=true;
            this.activeName=data.activeName
            this.valueList=data.valueList
            this.type=data.type
            if(this.$refs.deptTree && this.$refs.deptTree.store.currentNode){
                this.qjDeptId = this.$refs.deptTree.store.currentNode.key;
                this.getPageUsers();
            }
            this.mrformData = data.row;
            
            this.visible = true;
            this.canSubmit = true;
            this.loadTableDataUser(data.row.id);
            this.getData();
        },
        //查询已选择对象
        loadTableDataUser(fzId) {
            if(this.type=='ry'){
                 getFzList(fzId).then(data => {
                    this.tableDataUser = data.data.data;
                }).catch(() => {
                    this.$notify.error('数据错误')
                });
            }
            if(this.type=='jg'){
                jiGougetFzList(fzId).then(res=>{
                    this.tableDataUser = res.data.data;
                    this.tableDataUser=this.tableDataUser.map(item=>{
                        item.deptId = this.mrformData.deptId;
                        item["zjDeptId"] = this.mrformData.zjDeptId;
                        item["zjDeptName"] = this.mrformData.zjDeptName;
                        return item
                    })
                   //console.log("this.tableDataUser:"+JSON.stringify(this.tableDataUser))
                })
            }
            
        },
        getData(){
            if(this.type=='ry'){
                fetchTree(this.listQuery).then(response => {
                   ////console.log("RENYUAN:"+JSON.stringify(response))
                this.treeData = response.data.data;
                //this.treeData=this.jiequ(this.treeData)
                // this.treeData = response.data.data
                this.showPrise =true // 机构人员显示
                this.showPrisehidden =true  //右侧添加人显示
                this.showRentPrise = false // 机构隐藏
            })
            }
            if(this.type=='jg'){
                getDeptList().then(response => {
               //console.log("response.data.data:"+JSON.stringify(response.data.data))    
                //  this.mrformData.deptId
                this.treeData = this.getTree(response.data.data,1, 1)
                this.showPrise =false // 机构人员隐藏
                this.showPrisehidden =false // 右侧添加人隐藏
                this.showRentPrise = true // 右侧添加机构显示
        })
            }
        },
        //数据tree结构化
        getTree(bmlist, id, bz) {
        return bmlist.filter(v => {
            if (bz) {
            if (v.deptId === id) {
                return v
            }
            } else {
            if (v.parentId === id) {
                return v
            }
            }
        }).map(v => {
            const children = this.getTree(bmlist, v.deptId, 0);
            if (children.length) {
            v.children = children;
            // v.disabled = true;
            }
            return v
        });
        },
        filterNode(value, data) {
            if (!value) return true
            return data.label.indexOf(value) !== -1
        },
        getPersons(page, params) {
            this.tableloading = true;
            ControlPage(Object.assign({
                current: page.currentPage,
                size: page.pageSize
            }, params, this.searchForm, this.zdySearchForm)).then(response => {
                // this.list = response.data.data.records
                this.tableDataDept = response.data.data.records
                this.page.total = response.data.data.total
                this.tableloading = false;
                ////console.log(this.tableDataDept);
            }).catch(err => {
                this.tableloading = false;
            })
        },
        getNodeData(data) {
            if(this.type != "jg"){
                this.page.currentPage = 1
                this.qjDeptId = data.id;
                
                this.getPersons(this.page, {
                rySjdwId: data.id
                })
            }else{
                this.handleClick(data);
            }

        },
        //选人添加到右边的框
        //增加判断
        handleClick(vm) {
           //console.log("vm："+JSON.stringify(vm))
            for (var i = 0; i < this.tableDataUser.length; i++) {
                if (this.tableDataUser[i].jgDeptCode == vm.ryCode) {
                return;
                }
            }
            this.addRightRyxx(vm);
        },
        //添加人到右边
        addRightRyxx(vm){
            let objUser = {};
           //console.log("this.mrformData:"+JSON.stringify(this.mrformData))
            if(this.type != "jg"){
                objUser["jjDeptId"] = this.mrformData.jjDeptId;
                objUser["jjRyfzId"] = this.mrformData.id;
                objUser["ryCode"] = vm.ryCode;
                objUser["ryName"] = vm.ryXm;
                objUser["ryZw"] = vm.ryZhiwu;
                objUser["deptId"] = this.mrformData.jjDeptId;
            }else{
                objUser["jgDeptId"] = vm.deptId;
                objUser["jgDeptCode"] = vm.deptCode;
                objUser["jgDeptName"] = vm.deptName;
                objUser["deptId"] = this.mrformData.deptId;
                objUser["zjDeptId"] = this.mrformData.zjDeptId;
                objUser["zjDeptName"] = this.mrformData.zjDeptName;
            }
            
            
            this.tableDataUser.push(objUser);
        },
        // tree搜索事件,搜索人
        btnSearch() {
            let param = {
                rySjdwId: this.qjDeptId
            }

            if (this.listQuery.name.trim() !== '') {
                param['username'] = this.listQuery.name.trim();
                param['ryName'] = this.listQuery.name.trim();
            }
            this.getPageUsers(param);
        },
        //保存分组与人员
        btnSave(){
            this.canSubmit = false;
            addRyfzmxbList(this.tableDataUser, this.mrformData.id).then(data => {
                this.$notify.closeAll();
                this.$notify.success('操作成功');
                this.visible = false;
                this.ryfzMc=""
                var refreshDataList={
                    id:this.mrformData.id
                }
                this.$emit('refreshDataList',refreshDataList);
                this.tableDataUser=[]
            }).catch(() => {
                this.canSubmit = true;
            });
             if(this.activeName=='first'){
                if(this.ryfzMc==""){
                    return false
                }
                var params={
                    id:this.mrformData.id,
                    ryfzMc:this.ryfzMc
                }
                jiangjinryfzb(params).then(res=>{

                })
            }
        },
        //保存机构
        jgBtnSave(){
           //console.log(JSON.stringify(this.tableDataUser));
            
            this.canSubmit = false;
            insertJgmxbListNew(this.tableDataUser, this.mrformData.id).then(res=>{
                this.$notify.closeAll();
                this.$notify.success('操作成功');
                this.visible = false;
                this.ryfzMc=""
                var refreshDataList={
                    id:this.mrformData.id
                }
                this.$emit('refreshDataList',refreshDataList);
                this.tableDataUser=[]
            })
        },
        //删除人员list
        delUserList(index) {
            this.tableDataUser.splice(index, 1);
        },
        callback(){
            this.visible=false
        },
        // 每页数
        sizeChangeHandle(val) {
            this.page.pageSize = val
            this.page.currentPage = 1
            this.getPageUsers()
        },
        // 当前页
        currentChangeHandle(val) {
            this.page.currentPage = val
            this.getPageUsers()
        },
        //分页刷新
        getPageUsers(vm) {
        if (vm) {
            this.getPersons(this.page, vm)
        } else {
            this.getPersons(this.page, {
            rySjdwId: this.qjDeptId
            })
        }
        },
        //分页刷新
        getPageUsers(vm) {
            if (vm) {
                this.getPersons(this.page, vm)
            } else {
                this.getPersons(this.page, {
                rySjdwId: this.qjDeptId
                })
            }
        },
        //判空
        validatenull(val){
            return validatenull(val)
        }
    }
}
</script>

<style>

</style>